$(document).ready(function(){
    var slidesLength = $("div.slideshow .slide").size();
    for(i=0; i<slidesLength; i++){
        if(i == 0)
        $('.pagination').append($('<a href="#" class="pagi active-pagi"></a>'));
        else
        $('.pagination').append($('<a href="#" class="pagi"></a>'));
    }
    
$("a.pagi").click(function(){
    var $aindex = $(this).index();
    
    $( "div.slideshow .top" ).animate(
    {opacity: 0}, 1000, "linear",function() {
        $(this).removeClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).removeClass('active-pagi');
    });
    
    $('.slideshow .slide').eq($aindex).animate(
    {opacity: 1}, 3000, 'linear', function(){
        $(this).addClass('top');
        $('.pagi').eq($aindex).addClass('active-pagi');
    });
});
    
$(".slideshow").click(function(){
    $( "div.slideshow .top" ).animate(
    {opacity: 0}, 1000, "linear",function() {
        $(this).removeClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).removeClass('active-pagi');
    });

if($("div.slideshow .top").next(".slide").attr('class') != "slide"){
    $('div.slideshow .slide').first().animate(
    {opacity: 1}, 3000, 'linear', function() {
        $(this).addClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).addClass('active-pagi');
    });  
}
else{
    $('div.slideshow .top').next(".slide").animate(
    {opacity: 1}, 3000, 'linear', function() {
        $(this).addClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).addClass('active-pagi');
    });
}
});
});


var timer = setTimeout(slide, 9000);
function slide() {
    $( "div.slideshow .top" ).animate(
    {opacity: 0}, 1000, "linear",function() {
        $(this).removeClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).removeClass('active-pagi');
    });

if($("div.slideshow .top").next(".slide").attr('class') != "slide"){
    $('div.slideshow .slide').first().animate(
    {opacity: 1}, 3000, 'linear', function() {
        $(this).addClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).addClass('active-pagi');
    });  
}
else{
    $('div.slideshow .top').next(".slide").animate(
    {opacity: 1}, 3000, 'linear', function() {
        $(this).addClass('top');
        var $sindex = $(this).index();
        $('.pagi').eq($sindex).addClass('active-pagi');
    });
}
  timer = setTimeout(slide, 9000);
}
